<template>
  <div class="search-box">
    <div class="left-box">
      <p-row :gutter="16">
        <p-col :span="8">
          <div class="item">
            <span class="item-left"><span class="i-date">查询周期</span></span>
            <div class="item-right">
              <MonthRangPicker
                class="date-box"
                :allow-clear="true"
                :start.sync="form.startCreateTime"
                :end.sync="form.endCreateTime"
              />
            </div>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">销售组织</span>
            <p-select
              class="item-right"
              :allow-clear="true"
              :value="form.salesOrgCode"
              placeholder="请选择"
              :get-popup-container="
                triggerNode => triggerNode.parentNode || document.body
              "
              @change="handleChange($event, 'salesOrgCode')"
            >
              <p-select-option
                v-for="item in salesGroupOptions"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
        <p-col :span="6">
          <div class="item">
            <span class="item-left">部门</span>
            <p-select
              class="item-right"
              :allow-clear="true"
              :value="form.groupCode"
              placeholder="请选择"
              :get-popup-container="
                triggerNode => triggerNode.parentNode || document.body
              "
              @change="handleChange($event, 'groupCode')"
              @dropdownVisibleChange="downChange"
            >
              <p-select-option
                v-for="item in groupCodeOptions"
                :key="item.code"
                :value="item.code"
              >
                {{ item.name }}
              </p-select-option>
            </p-select>
          </div>
        </p-col>
      </p-row>
    </div>
    <div class="right-box">
      <p-button class="btn" type="primary" @click="searchTableList">
        搜索
      </p-button>
      <p-button class="btn" @click="resForm">重置</p-button>
      <!-- <p-button @click="exportFile">导出</p-button> -->
    </div>
  </div>
</template>

<script>
import MonthRangPicker from '@/components/picker/MonthRangePicker.vue';
import monent from 'moment';

const defaultForm = {
  salesOrgCode: '', // 销售组织
  groupCode: '', // 部门
  startCreateTime: monent(new Date(), 'YYYY-MM-DD').subtract(6, 'months'),
  endCreateTime: monent(new Date(), 'YYYY-MM'),
};
const all = { label: '全部', value: '' };
export default {
  components: {
    MonthRangPicker,
  },
  data() {
    return {
      form: {
        salesOrgCode: '', // 销售组织
        groupCode: '', // 部门
        startCreateTime: defaultForm.startCreateTime,
        endCreateTime: defaultForm.endCreateTime,
      },
    };
  },
  computed: {
    // 销售组织
    salesGroupOptions() {
      return [{ name: 'ALL', code: '' }, ...this.orgGroupOptions];
    },
    orgGroupOptions() {
      return this.$store.getters.getOrg({
        code: 'ltcsmsizebu',
        isDict: false,
      });
    },
    groupCodeOptions() {
      let option1 = this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'kapm',
        isDict: false,
      });
      let option2 = this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'sales',
        isDict: false,
      });
      return [{ name: 'ALL', code: '' }, ...option1, ...option2];
    },
    getSearchParams() {
      return {
        ...this.form,
      };
    },
  },
  watch: {},
  created() {},

  methods: {
    downChange(open) {
      if (open && !this.form.salesOrgCode) {
        this.$message.warning('请先选择销售组织');
      }
    },
    // 选中值
    handleChange(val, key) {
      this.form[key] = val;
    },
    async searchTableList() {
      this.$emit('search');
    },
    resForm() {
      this.form = { ...defaultForm };
      // this.form = { ...defaultForm, startTime: '', endTime: '' };
      this.$emit('search', true);
    },
    // 导出
    async exportFile() {
      // const data = this.form;
      // const res = await postCustomerMainExport({ ...data, isSubmersible: false });
      // await downloadFile(res.data, res.filename || '潜客维护列表.xls');
    },
  },
};
</script>

<style lang="less" scoped>
.right-box {
  flex: 1;
  display: flex;
  flex-direction: row;
  margin-left: 20px;
  .btn {
    margin-right: 8px;
  }
}

.search-box {
  display: flex;
  padding: 10px 20px;
  width: 100%;
  background: #f7f7f8;
  border: none;
  margin-bottom: 10px;
  .left-box {
    flex: 6;
    .item {
      display: flex;
      align-items: center;
      .item-left {
        flex: 2;
        padding-right: 8px;
        text-align: end;
        .i-date {
          position: relative;
          &.i-date::before {
            position: absolute;
            content: '*';
            color: red;
            top: 0px;
            left: -8px;
            font-size: 14px;
            font-weight: 500;
          }
        }
      }
      .item-right {
        flex: 3;
      }
    }
  }
}
</style>
